<form method="post"  >
    <script type="text/javascript">
        $(document).ready(function(){
            $('.chosen').chosen();
            $("#type").chosen().change(function(){  
                if($(this).val()==<?=Question::MULTICHOICE?>){
                    $('.select_option').each(function(){
                        $(this).css("display", "none");
                        $(this).before('<input type="radio" class="select_option" />');
                        $(this).remove();
                    });
                }else if($(this).val()==<?=Question::CHECKBOX?>){
                    $('.select_option').each(function(){
                        $(this).css("display", "none");
                        $(this).before('<input type="checkbox" class="select_option" />');
                        $(this).remove();
                    });
                }
            });
        });
        function add_option(obj){
            type =  $('.select_option').attr("type");
            length = $('form .option').length-2;
            $(".option-action").before('<tr class="option" ><td colspan="3" ><input name="answer[]" type="'+type+'" class="answer select_option" /> <input type="text" name=option[] class="long-text input-form"/><span><a href="#" onclick="return remove_option(this);">x</a></span></td></tr>');
            $('form .question tr.option input[type="text"]').each(function(index){
                if(!$(this).hasClass("can_click")){
                    $(this).focus();
                    var a = $(this).autocomplete({ 
                        serviceUrl:'<?php echo $this->Html->url(array('action'=>'show_option')) ?>',
                        maxHeight:400,
                        width:405,
                        zIndex: 9999
                    });
                }
            });
            return false;
        }
        function save_question(obj){
            ret = 1;
            str= "";
            if(!$("form #title").val()){
                ret = 0;
                alert("Please input the title!");
                $("form #title").focus();
            }
            check = 0;
            $('form .answer').each(function(){
                if($(this).attr("checked")){
                    check=1;
                }
            });
            if(check==0){
                alert("Please check to choose the answer for this question!");
                $("form").focus();
            }
            if(ret==1&&check==1){
                $('form .answer').each(function(index){
                    if($(this).attr("checked")){
                        check=1;
                        $('form').append("<input type='hidden' name=answers[] value='"+index+"'>");
                    }
                });
                $.ajax({
                    type        : "post",
                    url         : "<?php echo $this->Html->url(array('action'=>"save_question",$survey_id,  isset($question_id)?$question_id:"")) ?>",              
                    data        : $(obj).parents("form").serialize(),
                    success     : function(data) {              
                        $(obj).parents("form").css("display", "none");
                        $(obj).parents("form").before(data);
                        $(obj).parents("form").remove();
                        $("#check_form").html("0");
                    },
                    error       : function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }

               });
            }
            
            return false;
        }
        function remove_question_form(obj){
            $(obj).parents("form").remove();
            $("#check_form").html("0");
            return false;
        }
    </script>
    <table class="question" width="100%" cellspacing="0" cellpadding="0" >
        <tr>
            <th width="20%">Question Title</th>
            <td width="">
                <?php
                    echo $this->Form->input('title', array(
                                        'label'     => false,
                                        'div'       => false,
                                        'name'      =>'title',
                                        'value'     =>  isset($question['Question']['title'])?$question['Question']['title']:"",
                                        'class'     => 'input-form long-text med')
                        ); 
                    echo $this->Form->input('has_other', array('type' => "hidden","name"=>"has_other","id"=>"other","value"=>isset($question['Question']['has_other'])?$question['Question']['has_other']:0));
                ?>
            </td>
            <td class="table-action" align="right"><a href="#" class="button" onclick="return save_question(this)">Save</a><a href="#"class="button"  onclick="return remove_question_form(this)">Remove</a></td>
        </tr>
        <tr>
            <th valign="top">Question Type</th>
            <td colspan="2">
                <?php
                    echo $this->Form->input('type', array(
                                        'type'=>"select",
                                        'options'=> Question::get_types(),
                                        'label'     => false,
                                        'div'       => false,
                                        'name'      =>'type',
                                        'selected'  =>  isset($question['Question']['type'])?$question['Question']['type']:"",
                                        'class'     => 'chosen med')
                        );     
                ?>      
            </td>
        </tr>
        <?php $type="radio"; ?>
        <?php if(isset($question_id)){
                if($question['Question']['type']==Question::CHECKBOX){
                    $type="checkbox";
                }
                $questions = QuestionOption::get_options_by_question($question['Question']['id']);
                $answer = Answer::get_answers_by_questions($question['Question']['id']);
                foreach ($questions as $value) {
                    ?>
                    <tr class="option" ><td colspan="3" ><input name="answer[]"  <?php echo (in_array($value['Option']['id'], $answer))?"checked='checked'":"" ?> type="<?=$type?>" class="answer select_option" /> <input type="text" name=option[] value="<?=$value['Option']['title']?>" class="long-text input-form"/><span><a href="#" onclick="return remove_option(this);">x</a></span></td></tr>
            <?php    }
         } ?>
        <tr class="option-action option" style="padding-top: 40px;">
            <td colspan="3" style="" class="option">
                <input type="<?=$type?>" style="cursor: pointer;opacity: 0.8;font-weight: bold;"  class="select_option" /> 
                <input type="text"  onclick="return add_option(this)"  value="Click to add option" style="background: #ccc;cursor: pointer" class="can_click long-text input-form"/>
            </td>
        </tr>
    </table>
</form>